<template>
    <div id="app" v-loading="loading"
    >
        <div class="title">
            <a class="backPage iconfont icon-icon-test" @click="$router.push('/task')"></a>
            任务详情
            <div class="rightBotttom">
                <a 
                    class="iconfont icon-xiangyoujiantou-copy" 
                    style="font-size:21px;"
                    @click="hanldeQuiteNav('prve')"
                >
                </a>
                <a class="iconfont icon-xiangyou-copy"
                    @click="hanldeQuiteNav('next')"
                >
                </a>
            </div>
        </div>
        <template v-if="!(taskLink && taskSteps.length<=0)">
            <el-form class="form" label-position="top">
                <el-row :gutter="40" class="other">
                    <el-col :span="4">
                        <div class="grid-content bg-purple"
                            @click="$router.push(`/user/detail/${taskLink.user_id}`)"
                        >
                            <el-form-item label="派单人">
                                <div class="userHead">
                                    <img :src="taskLink.avatar" class="square" />
                                    {{taskLink.nick_name}}
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="任务ID">
                                {{
                                    taskLink.id
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="分类">
                                {{
                                    taskLink.first_name  + ' - ' + taskLink.seconde_name
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="状态">
                                <font color="#acacac">
                                    {{
                                        taskLink.status_text
                                    }}
                                </font>
                                <el-button size="mini" style="margin-left:15px;"
                                    v-if="taskLink.status==2 || taskLink.status==6"
                                    @click="handleClearing(1)"
                                >
                                    开始清算
                                </el-button>
                                <el-button size="mini" style="margin-left:15px;"
                                    v-if="taskLink.status==5"
                                    @click="handleClearing(2)"
                                >
                                    取消清算
                                </el-button>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="已 / 总人数">
                                <div class="progress ell">
                                <el-progress type="dashboard" 
                                    :percentage="countTaskRadius(taskLink.total_surplus_accepts,taskLink.total_accepts).radius" 
                                    :width="45" 
                                    :stroke-width="4" class="elPr">
                                </el-progress>
                                    {{
                                        countTaskRadius(taskLink.total_surplus_accepts,taskLink.total_accepts).text
                                    }}
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="单 / 总价">
                                <font color="#F30">
                                    {{
                                        priceFormat(taskLink.amount) + ' / ' + priceFormat(taskLink.amount*taskLink.total_accepts)
                                    }}
                                </font>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="接单列表">
                                <router-link class="blue" :to="'/task/accept?search=taskId,'+taskLink.id">查看
                                </router-link>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="发布时间">
                                {{
                                    taskLink.time_created ? countTrialDate(taskLink.time_created* 1000) : ' - '
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="过审时间">
                                {{
                                    taskLink.last_updated ? countTrialDate(taskLink.last_updated* 1000) : ' - '
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="完成时间">
                                {{
                                    taskLink.status_time ? countTrialDate(taskLink.status_time* 1000) : ' - '
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="置顶最后结束时间">
                                {{
                                    taskLink.time_top_created ? 
                                    countTrialDate(((new Date().getTime()/1000) + taskLink.top_last_time) * 1000) 
                                    : '-'
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="审批管理员">
                                {{
                                    taskLink.admin_id
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="任务标题">
                            <el-input
                                v-model="taskLink.title"
                            >

                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="难度等级">
                            <el-select placeholder="请选择" class="filter"
                                v-model="taskLink.diffculty_level"
                            >
                                <el-option
                                    v-for="taskLevelItem of taskLevelList"
                                    :key="taskLevelItem.name"
                                    :label="taskLevelItem.name"
                                    :value="taskLevelItem.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <template>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                            <el-form-item label="做任务限时,分钟">
                                <div class="disbox">
                                    <el-input class="disflex"
                                        v-model="taskLink.limited_time"
                                    >
                                    </el-input>
                                    <el-switch :value="false" class="elSwitch" v-if="mode=='systemTemplate'">
                                        
                                    </el-switch>
                                </div>
                            </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                            <el-form-item label="派单人审核时间,分钟">
                                <div class="disbox">
                                    <el-input class="disflex"
                                        v-model="taskLink.limited_time_approve"
                                    ></el-input>
                                    <el-switch :value="false" class="elSwitch" v-if="mode=='systemTemplate'"></el-switch>
                                </div>
                            </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                            <el-form-item label="任务截至过期,小时">
                                <div class="disbox">
                                    <el-input class="disflex"
                                        v-model="taskLink.deadline_time"
                                    ></el-input>
                                    <el-switch :value="false" class="elSwitch" v-if="mode=='systemTemplate'"></el-switch>
                                </div>
                            </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                            <el-form-item label="可接设备">
                                <div class="disbox">
                                    <el-checkbox-group v-model="taskLink.limited_os" class="disflex"
                                        :min="1"
                                        @change="handleCheckedCitiesChange"
                                    >
                                        <el-checkbox 
                                            v-for="osItem of osList" 
                                            :key="osItem.name"
                                            :label="osItem.value"
                                        >
                                        {{
                                            osItem.name
                                        }}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                    <el-switch :value="false" class="elSwitch" v-if="mode=='systemTemplate'"></el-switch>
                                </div>
                            </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <el-form-item label="置顶">
                                    <el-switch v-model="taskLink.is_top"></el-switch>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <el-form-item label="是否展示">
                                    <el-switch v-model="taskLink.is_recommand"></el-switch>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="16">
                            <div class="grid-content bg-purple">
                                <el-form-item label="任务标签">
                                        <div>
                                            <el-tag
                                                :key="tagIndex+'tag'"
                                                v-for="(tag,tagIndex) in dynamicTags"
                                                closable
                                                :disable-transitions="false"
                                                @close="handleClose(tag)">
                                                {{tag}}
                                            </el-tag>
                                            <el-input
                                                class="input-new-tag"
                                                v-if="inputVisible"
                                                v-model="inputValue"
                                                ref="saveTagInput"
                                                size="small"
                                                @keyup.enter.native="handleInputConfirm"
                                                @blur="handleInputConfirm"
                                            >
                                            </el-input>
                                            <el-button v-else class="button-new-tag" size="small" 
                                                @click="showInput">
                                                + 新标签
                                            </el-button>
                                        </div>
                                </el-form-item>
                            </div>
                        </el-col>
                    </template>
                </el-row>
            </el-form>
            <task-step mode="userTemplate" 
                :taskSteps="taskSteps"
                :uploadBids="uploadBids"
            />
        </template>
        <el-button 
            type="primary" 
            :style="{'margin-top':'30px','margin-left':(taskSteps.length==0?'':'45px')}"
            :loading="saveBtnLoad"
            @click="handleEdit"
        >
            立即保存
        </el-button>
    </div>
</template>
<script>
    import TaskDetail from './index.js';
    export default TaskDetail;
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
<style lang="scss" scoped>
.form{
    margin-top:30px;
    border-top:1px solid #FFF;
}
.titles{
    margin-top:25px;
    margin-bottom:12px;
    font-size:19px;
}
.progress{
    height:40px;
    line-height:40px;
    overflow:hidden;
    .elPr{
        vertical-align: middle;
        margin-right:13px;
    }
}
.filter{
    width:100%;
}
.other{
    margin-bottom:40px;
}
.rightBotttom{
    float:right;
    a{
        height:36px;
        line-height:36px;
        text-align:center;
        display:block;
        margin-right:25px;
        font-size:23px;
        cursor: pointer;
        border-radius:3px;
        float:left;
        color:#d9d9d9;
        &:nth-last-child(1){
        margin-right:0;
        }
    }
}
</style>